<?php 
$lat = $_REQUEST["lat"];
$lng = $_REQUEST["lng"];

$address = $_REQUEST["address"];

print "<script type='text/javascript'>";
print "function initialize() {".

	"var latlng = new google.maps.LatLng($lat, $lng );".
	"detectBrowser();".
	"var myOptions = {".
	 " zoom: 13,".
	 " mapTypeId: google.maps.MapTypeId.ROADMAP,".
	  "center:latlng".
	"};".
	"var map = new google.maps.Map(document.getElementById('map_canvas'),".
		"myOptions);".

	"var marker = new google.maps.Marker({".
	"	map: map,".
	"	position: latlng,".
	"	title: '$address'".
	"});".
	
"}";

print "</script>";


?>
<!DOCTYPE html>
<html style="height:100%;">
<head>
<title>Map View</title>
<meta name="viewport" content=" width=device-width, initial-scale=1, user-scalable=no"/>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?sensor=true">
</script>
<link rel="stylesheet" href="css/maps.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script type="text/javascript">

var initialLocation;
var browserSupportFlag =  new Boolean();

function detectBrowser(){
	var userAgent = navigator.userAgent;

	var mapdiv = document.getElementById('map_canvas');
	if (userAgent.indexOf('iPhone') != -1 || userAgent.indexOf('Android') != -1 ) {
		mapdiv.style.width = '100%';
		mapdiv.style.height = '100%';

	} else {	
		mapdiv.style.width = '100%';
		mapdiv.style.height = '100%';
	}
	
}

function handleNoGeoLocation(errorFlag) {
    if (errorFlag == true) {
      alert("Geolocation service failed.");

    } else {
      alert("Your browser doesn't support geolocation.");

    }
    map.setCenter(initialLocation);
  }

$(document).ready(function(e) {
    initialize();
});
</script>
</head>
<body  style="height:100%; width:100% margin:0px 0px 0px 0px; padding:0px;">
<div id="page" data-role="page" class="page-map ui-page ui-body-c ui-page-active" data-external-page="true">
<div data-role="header"><a data-rel="back" data-icon="back" data-icon="back">Back</a> <h3>Location</h3></div>

<div id='map_canvas'></div>
</div>
</body>
</html>